<template>
    <div class="middle-container" :style="{backgroundImage: bgImg, color: '#38E5DE'}">
        <div class="title-container">
            <div class="title">
                <img src="../../assets/img/common/title_tip.png" height="16" width="16"/>
                <div class="title-text">{{ title }}</div>
            </div>
            <img src="../../assets/img/common/close-16px.png" style="cursor: pointer" @click="closeWindow" height="16" width="16"/>
        </div>
        <div class="content-container">
            <div class="button-container">
                维度：
                <el-select v-model="levelValue" size="mini">
                    <el-option
                        v-for="item in levelOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                年份：
                <el-select v-model="yearValue" size="mini" :disabled="levelValue === 'year'">
                    <el-option
                        v-for="item in yearOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                统计：
                <el-select v-model="statsValue" size="mini" :disabled="levelValue === 'year'">
                    <el-option
                        v-for="item in statsOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                <div v-show="pageType !== 'ranking' && pageType !== 'ns'">
                    类型：
                    <el-select v-model="filterValue" size="mini">
                        <el-option
                            v-for="item in filterSzOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="echarts-container">
                <bar-line-chart-simple class="thrChart" :filter-option="{year: yearValue, type: levelValue, statsType: statsValue, filter: filterValue}"/>
            </div>
        </div>
    </div>
</template>

<script>
import {ref, watch} from 'vue'
import BarLineChartSimple from "@/components/portEconomy/BarLineChartSimple";
import {useRoute} from "vue-router";

export default {
    name: "ContaMiddleHome",
    components: {BarLineChartSimple},
    setup() {
        const levelOptions = ref([
            {value: 'year', label: '年'},
            {value: 'quarter', label: '季'},
            {value: 'month', label: '月'},
        ])
        const yearOptions = ref([
            {value: 2021, label: 2021,},
            {value: 2020, label: 2020,},
            {value: 2019, label: 2019,}
        ])
        const filterSzOptions = ref([
            {value: '合计', label: '合计',},
            {value: '重箱', label: '重箱',},
            {value: '空箱', label: '空箱',},
            {value: '进口', label: '进口',},
            {value: '出口', label: '出口',},
            {value: '外贸出口', label: '外贸出口',},
        ])
        const statsOptions = ref([
            {value: '累计', label: '累计',},
            {value: '本月', label: '本月',},
        ])
        let params = useRoute().params.type.split('-');
        const pageType = params[0]
        const filterValue = ref(params[1])
        const yearValue = ref(2021)
        const levelValue = ref('month')
        const statsValue = ref('累计')
        const thrChartOption = ref({});

        const closeWindow = () => {
            if (pageType === 'sg') {
                window.AC.HideCustomWindow('middle-sz-sg', {})
                window.AC.SetWindowVisible([{id: 6,visible: true}]);
            } else {
                window.AC.HideWindow(6, {});
            }
        }

        watch(levelValue, ()=> {
            if (levelValue.value === 'year') {
                statsValue.value = '累计'
            }
        })

        return {
            levelOptions,
            yearOptions,
            statsOptions,
            filterSzOptions,
            levelValue,
            yearValue,
            statsValue,
            filterValue,
            thrChartOption,
            pageType,
            closeWindow
        }
    },
    data() {
        return {
            bgImg: 'url(' + require('../../assets/img/common/middle-bg.png') + ')',
            title: '集装箱吞吐量'
        }
    },
}
</script>

<style scoped>
.middle-container {
    height: 800px;
    width: calc(1200px - 48px);
    padding-left: 24px;
    padding-right: 24px;
}

.title-container {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    height: 46px;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #38E5ED;
}

.title {
    display: inline-flex;
    align-items: center;
}

.title-text {
    margin-left: 5px;
}

.button-container {
    display: inline-flex;
    width: 100%;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 16px;
}

.button-container > div {
    margin-right: 10px;
}

.thrChart {
    height: 600px;
}

.el-select {
    width: 100px;
}
</style>
<style>
.el-input__inner {
    background-color: #ffffff00;
    border: 1px solid #38e5de;
    color: #38e5de;
}

.el-select .el-input .el-select__caret,
.el-select:hover .el-input__inner,
.el-select .el-input__inner:focus,
.el-select .el-input.is-focus .el-input__inner,
.el-input.is-disabled .el-input__inner,
#nav > div > div.content-container > div > div:nth-child(2) > div > div.is-disabled > input,
#nav > div > div.content-container > div > div:nth-child(3) > div > div.is-disabled > input{
    color: #38e5de;
    border-color: #38e5de;
}

.el-input.is-disabled .el-input__inner,
#nav > div > div.content-container > div > div:nth-child(2) > div > div.is-disabled > span > span > i,
#nav > div > div.content-container > div > div:nth-child(3) > div > div.is-disabled > span > span > i{
    background-color: #38e5de00;
    opacity: 0.5;
    cursor: not-allowed;
}
</style>